<template>
  <div class="info-card">
    <div class="corver-bg">
      <div class="main">
        <p class="name-locate">
          您好，我是{{ info.companyName || '~~' }}-{{ info.name || '~~' }}
        </p>
        <p class="title">邀请你加入M平台数字化平台</p>
        <el-button class="look-btn" type="text" @click="lookNotice"
          >查看通知书</el-button
        >
        <div class="footer">
          <p class="contact-phone">联系电话：{{ info.phone || '~~' }}</p>
          <p class="notice">备注：{{ info.remark || '~~' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'infoCard',
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    lookNotice() {
      if (this.info.noticeUrl) {
        this.$pdfViewer({url: this.info.noticeUrl, title: '通知书'})
      } else {
        this.$message({type: 'warning', message: '暂时还没有上传通知书哦！'})
      }
    }
  }
}
</script>
<style lang="less">
.info-card {
  position: absolute;
  transform: translate(35%, -45%);
  left: 15%;
  top: 50%;
  .corver-bg {
    box-sizing: border-box;
    width: 384px;
    height: 449px;
    padding: 40px 32px 70px;
    background-color: #fff;
    .main {
      color: #26344c;
      height: 100%;
      position: relative;
      .name-locate {
        font-size: 14px;
        font-weight: 500;
      }
      .title {
        font-size: 18px;
        margin: 16px 0;
        font-weight: 500;
        letter-spacing: 1px;
      }
      .look-btn {
        margin: 0;
        padding: 0;
      }
      .footer {
        position: absolute;
        bottom: 0;
        .contact-phone {
          font-weight: 400;
          font-size: 14px;
        }
        .notice {
          margin-top: 11px;
          font-size: 12px;
          color: #a7b1c7;
        }
      }
    }
  }
}
</style>
